<#include "/WEB-INF/view/inc/inc.html"/>

<@html qmask=0>
<style>
    /*.nav-tabs {
        float: left;
        border-bottom: 0;
    }

    .nav-tabs li {
        float: none;
        margin: 0;
    }

    .nav-tabs li a {
        margin-right: 0;
        border: 0;
        background-color: #333;
        border-radius: 0 0 0 0;
    }

    .nav-tabs li a:hover {
        background-color: #444;
    }

    .nav-tabs .glyphicon {
        color: #fff;
    }

    .nav-tabs .active .glyphicon {
        color: #333;
    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        border: 0;
    }

    .tab-content {
        margin-left: 45px;
    }

    .tab-content .tab-pane {
        display: none;
        background-color: #fff;
        padding: 1.6rem;
        overflow-y: auto;
    }

    .tab-content .active {
        display: block;
    }

    .list-group {
        width: 100%;
    }

    .list-group .list-group-item {
        height: 50px;
    }

    .list-group .list-group-item h4, .list-group .list-group-item span {
        line-height: 11px;
    }*/

    #verttabs .nav-tabs {
        float: left;
        border-bottom: 0;
    }
    #verttabs .nav-tabs li {
        float: none;
        margin: 0;
    }
    #verttabs .nav-tabs li a {
        margin-right: 0;
        border: 0;
        /*background-color: #333;*/
        border-radius: 0 0 0 0;
        border-right: 1px solid #ddd;
    }
    #verttabs .nav-tabs li a:hover {
        background-color: #444;
    }
    #verttabs .nav-tabs > li.active > a,#verttabs .nav-tabs > li.active > a:hover,#verttabs .nav-tabs > li.active > a:focus {
        /*border: 0;*/
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-right: 1px solid #fff;
        border-radius: 4px 0 0 4px;
    }
    #verttabs .tab-content {
        margin-left: 45px;
    }
    #verttabs .tab-content .tab-pane {
        display: none;
        background-color: #fff;
        padding: 1.6rem;
        overflow-y: auto;
    }
    #verttabs .tab-content .active {
        display: block;
    }
    #verttabs .list-group {
        width: 100%;
    }
    #verttabs .list-group .list-group-item {
        height: 50px;
    }
    #verttabs .list-group .list-group-item h4,#verttabs .list-group .list-group-item span {
        line-height: 11px;
    }
</style>

<@ueditor init=false parseid='.ueparse'>
var ue2 = qiao.ue('ueditor2', 'mini');
</@ueditor>
<div class="container">
    <div class="row">
        <div class="col-xs-10 col-sm-9 col-md-9 col-lg-9">
            <div class="jumbotron">
                <h2>seeFuckViedo:</h2>
                <h1>${seevideo?string("Yes","No")}</h1>

            </div>
            <a href="#" onclick="changewidth()">changewidthdis</a>
            <a href="#" onclick="changewidth(1)">changewidthshow</a>
            <div id="left" class="col-md-4 col-sm-5">
                <h4 id="bsmenu">菜单</h4>
                <@bsmenu menus=mymenus/>
                <pre><code class="language-html" data-lang="html">@bsmenu menus=mymenus</code></pre>
            </div>
            <div class="clearfix">
            <!-- stard -->
            <div id="right" class="col-md-4 col-sm-5">
                <div id="verttabs">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#a" data-toggle="tab"><span
                                class="glyphicon glyphicon-heart"></span></a></li>
                        <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
                        <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
                        <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
                        <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
                        <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="a">
                            <h3>Who do you Love?</h3>
                            <ul class="list-group pull-left">
                                <li class="list-group-item">
                                    <h4>Jen &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>Dezi &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>Eli &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>Mojo &nbsp; &nbsp;<span class="badge pull-right">83%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>Myself &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="b">
                            <h3>What's your Favorite?</h3>
                            <ul class="list-group pull-left">
                                <li class="list-group-item">
                                    <h4>Crystals &nbsp; &nbsp;<span class="badge pull-right">100%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>Healing &nbsp; &nbsp;<span class="badge pull-right">90%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>Exploring &nbsp; &nbsp;<span class="badge pull-right">78%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>QiGong &nbsp; &nbsp;<span class="badge pull-right">83%</span></h4>
                                </li>
                                <li class="list-group-item">
                                    <h4>Myself &nbsp; &nbsp;<span class="badge pull-right">100%</span>
                                    </h4></li>
                            </ul>
                        </div>
                        <div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit.
                            Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt
                            condimentum vitae.
                        </div>
                        <div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis
                            elementum auctor accumsan. Aliquam in felis sit amet augue.
                        </div>
                        <div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit.
                            Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt
                            condimentum vitae.
                        </div>
                        <div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing
                            elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt
                            condimentum vitae.
                        </div>
                    </div>
                    <!-- /tab-content -->
                </div>
                <!-- /tabbable -->
            </div>
            <!-- /col -->
            </div>
            <!--todo -->

            <div class="clearfix">
                录入/评论
                <div class="well">...
                    <div class="well">...
                        <div class="well">
                            <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
                                <ul class="media-list" id="facegroup">
                                <li class="media">
                                    <div class="media-left">
                                        <a href="javascript:void(0);" id="_face1">
                                            <img class="media-object" src="/WUI/timeline/examples/img/3d-3.jpg" alt="..." >
                                        </a>
                                    </div>
                                </li><li class="media">
                                <div class="media-left">
                                    <a href="javascript:void(0);" id="_face2">
                                        <img class="media-object" src="/WUI/timeline/examples/img/3d-2.jpg" alt="..." >
                                    </a>
                                </div>
                            </li><li class="media">
                                <div class="media-left">
                                    <a href="javascript:void(0);" id="_face3">
                                        <img class="media-object" src="/WUI/timeline/examples/img/3d-1.jpg" alt="..." >
                                    </a>
                                </div>
                            </li><li class="media">
                                <div class="media-left">
                                    <a href="javascript:void(0);" id="_face4">
                                        <img class="media-object" src="/WUI/timeline/examples/img/3d-4.jpg" alt="..." >
                                    </a>
                                </div>
                            </li>
                            </ul>
                            </div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <@bsul lis=listmyul1 />
                                <button onclick="isay(this)">我来</button>
                                原因如下：。。
                            </div>

                        </div>
                    </div>
                </div>

                <div class="borders col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <label class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2">观点</label>
                    <label class="col-xs-12 col-sm-10 col-md-10 col-lg-10"><@bsul lis=listmyul /></label>
                    <@bsinput title='评论内容' input=false>
                    <script id="ueditor2" name="row.blog_comment_content" type="text/plain">阿道夫地方-所得税</script>
                    </@bsinput>
                </div>
            </div>
        <div>
            <button onclick="getAllHtml()">获得整个html的内容</button>
            <button onclick="getContent()">获得内容</button>
            <button onclick="setContent()">写入内容</button>
            <button onclick="setContent(true)">追加内容</button>
            <button onclick="getContentTxt()">获得纯文本</button>
            <button onclick="getPlainTxt()">获得带格式的纯文本</button>
            <button onclick="hasContent()">判断是否有内容</button>
            <button onclick="setFocus()">使编辑器获得焦点</button>
        </div>
            <div class="clearfix">

                赞事件、输入框、完善按钮事件，<br/>
                展示详细，详细列表。<br/><br/>

                1.新增项，自动增加li-ok<br/>
                2.编辑按钮，可以直接同步内容。-ok<br/>
                  2.1 js 方法，设置固定id，下面ul 里面的li。并保存数据。，空的li-ok<br/>
                  2.2 js 方法，同步ul内容到 - 富文本框。-ok<br/>
                  2.3 js 空删除。-ok<br/><br/>

                详细列表。<br/>

                展示列表<br>
                《什么是<span style="text-decoration:underline">装</span>》<br>
                 _____<br>
                |     |<br>
                |     |<br>

                《做好的<span style="text-decoration:underline">学习方法</span>有那些》<br>
                 _____<br>
                |     |<br>
                |     |<br>

            </div>
            <style>
                .media{
                    margin-top: 0px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    float: left;
                }
                .media-left img{
                    width: 50px; height: 50px;
                }
                .media-list{
                    width: 106px;
                    height: 106px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                }

                .borders{
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    float: left;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    $("#facegroup a").kq_bind("click",function(){
                        alert($(this).attr("id"));
                    },{'title':"点我"});

                    var dblobj = {end:'_end',selecter:'.borders ul>li'}; //标识end: ul li input 的id 后缀，selecter：获取ul方式
                    dblobj.func = function(editid,data){//双击后，离开或者回车 ul li input时触发函数
                        var editval=$("#"+editid).val();//获取更改内容
                        if(editval ==""){
                            $("#"+editid).parent().remove();
                        }else{
                            var liindex = $("#"+editid).parent().index();
                            if(liindex == ($(data.selecter).size()-1)){//如果 input 上级即li 在同级的位置== ul的个数-1 时，即最后一个，增加一空行
                                addNullLi($("#"+editid).parent().parent());
                            }
                            updateUL(ue2,editval,editid,liindex);//更新 富文本框
                            $("#"+editid).parent().html(editval); //将点击的td中原内容改为输入的新内容
                        }
                    }
                    /**
                     * 不写成独立方法原因是：对象无法获取 之前获取的方式，是class，id，还是嵌套。
                     * 第二，for循环 无法获取一二三四。
                     */
                    $(document).on("dblclick",".borders ul>li",dblobj,function(i){
                        var inval=$(this).html();//获取当前点击li内容
                        var inid=$(this).attr("id");//获取当前点击li的id
                        $(this).html("<input id='edit_"+inid+ i.data.end+"'name='' value='"+ci.trimhtml(inval)+"'>");//双击以后当前td变成输入框，id定义为edit"+infd+inid+"为了避免重复，value为原内容
                        $("#edit_"+inid+i.data.end).keydown(function(event){
                            if(event.keyCode==13){
                                i.data.func("edit_"+inid+i.data.end,i.data)
                            }
                        });
                        //鼠标焦点失去后执行
                        $("#edit_"+inid+i.data.end).focus().blur(function(){
                            i.data.func("edit_"+inid+i.data.end, i.data);
                        });
                    });

                });

                /**
                 * 没有实现 自动排序，因为富文本无法操作，并且无法获取前后的排序，需要便利，
                 * 这样好处：用户随意安排，不会删除
                 * @param ue
                 * @param cont
                 * @param id
                 * @param liindex
                 */
                function updateUL(ue,cont,id,liindex){//更新富文本框
                    var percont= ue.getContent();
                    var innadd = '<span style="font-size: 18px;"><strong>'+cont+'</strong></span>';
                    if($("#ueditor_0").contents().find("#"+id).length>0){ //如果富文本框中已经有了该id，这更新
                        $("#ueditor_0").contents().find("#"+id).html(innadd);
                    }else{//否则 新增
                        var add = '<p id="'+id+'">'+innadd+'</p><p>...</p>'

                        ue.setContent(percont+add);
                    }
                }

                function getMaxLengLi(len){
                    return '<li class="list-group-item" id="id'+ (len==undefined?0:len) +'">&nbsp;&nbsp;&nbsp;</li>';
                }

                function addNullLi(t){
                    $(t).append(getMaxLengLi((0-$(t).children().length)));
                }

                function isay(id){
                    $('.borders .list-group').html($(id).prev().html());
                    addNullLi($('.borders .list-group'));
                }
                /*获取数据*/
                function getdate(th){
                    alert($(th).text());
                }

                function isFocus(e){
                    alert(ue2.isFocus());
                    UE.dom.domUtils.preventDefault(e)
                }
                function setblur(e){
                    ue2.blur();
                    UE.dom.domUtils.preventDefault(e)
                }
                function insertHtml() {
                    var value = prompt('插入html代码', '');
                    ue2.execCommand('insertHtml', value)
                }
                function createEditor() {
                    enableBtn();
                    UE.getEditor('editor', {
                        initialFrameWidth:"100%"
                    })
                }
                function getAllHtml() {
                    alert(ue2.getAllHtml())
                }
                function getContent() {
                    var arr = [];
                    arr.push("使用editor.getContent()方法可以获得编辑器的内容");
                    arr.push("内容为：");
                    arr.push(ue2.getContent());
                    alert(arr.join("\n"));
                }
                function getPlainTxt() {
                    var arr = [];
                    arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
                    arr.push("内容为：");
                    arr.push(ue2.getPlainTxt());
                    alert(arr.join('\n'))
                }
                function setContent(isAppendTo) {
                    var arr = [];
                    arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
                    ue2.setContent('欢迎使用ueditor', isAppendTo);
                    alert(arr.join("\n"));
                }
                function setDisabled() {
                    ue2.setDisabled('fullscreen');
                    disableBtn("enable");
                }
                function setEnabled() {
                    ue2.setEnabled();
                    enableBtn();
                }
                function getText() {
                    //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
                    var range = ue2.selection.getRange();
                    range.select();
                    var txt = ue2.selection.getText();
                    alert(txt)
                }
                function getContentTxt() {
                    var arr = [];
                    arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
                    arr.push("编辑器的纯文本内容为：");
                    arr.push(ue2.getContentTxt());
                    alert(arr.join("\n"));
                }
                function hasContent() {
                    var arr = [];
                    arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
                    arr.push("判断结果为：");
                    arr.push(ue2.hasContents());
                    alert(arr.join("\n"));
                }
                function setFocus() {
                    ue2.focus();
                }
                function deleteEditor() {
                    disableBtn();
                    ue2.destroy();
                }
                function disableBtn(str) {
                    var div = document.getElementById('btns');
                    var btns = domUtils.getElementsByTagName(div, "button");
                    for (var i = 0, btn; btn = btns[i++];) {
                        if (btn.id == str) {
                            domUtils.removeAttributes(btn, ["disabled"]);
                        } else {
                            btn.setAttribute("disabled", "true");
                        }
                    }
                }

                function enableBtn() {
                    var div = document.getElementById('btns');
                    var btns = domUtils.getElementsByTagName(div, "button");
                    for (var i = 0, btn; btn = btns[i++];) {
                        domUtils.removeAttributes(btn, ["disabled"]);
                    }
                }

                function getLocalData () {
                    alert(ue2.execCommand( "getlocaldata" ));
                }
                function clearLocalData () {
                    ue2.execCommand( "clearlocaldata" );
                    alert("已清空草稿箱")
                }

            </script>
            <div class="clearfix">
                <ul class="media-list" id="facegroup1">
                    <li class="media">
                        <div class="media-left">
                            <a href="javascript:void(0);" id="_face11">
                                 <img class="media-object" src="/WUI/timeline/examples/img/3d-3.jpg" alt="..." >
                            </a>
                        </div>
                    </li><li class="media">
                        <div class="media-left">
                            <a href="javascript:void(0);" id="_face21">
                                <img class="media-object" src="/WUI/timeline/examples/img/3d-2.jpg" alt="..." >
                            </a>
                        </div>
                    </li><li class="media">
                        <div class="media-left">
                            <a href="javascript:void(0);" id="_face31">
                                <img class="media-object" src="/WUI/timeline/examples/img/3d-1.jpg" alt="..." >
                            </a>
                        </div>
                    </li><li class="media">
                        <div class="media-left">
                            <a href="javascript:void(0);" id="_face41">
                                <img class="media-object" src="/WUI/timeline/examples/img/3d-4.jpg" alt="..." >
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        <div class="clearfix">
            <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
                <ul class="media-list" id="facegroup2">
                <li class="media">
                    <div class="media-left">
                        <a href="javascript:void(0);" id="_face12">
                            <img class="media-object" src="/WUI/timeline/examples/img/3d-3.jpg" alt="..." >
                        </a>
                    </div>
                </li><li class="media">
                <div class="media-left">
                    <a href="javascript:void(0);" id="_face22">
                        <img class="media-object" src="/WUI/timeline/examples/img/3d-2.jpg" alt="..." >
                    </a>
                </div>
            </li><li class="media">
                <div class="media-left">
                    <a href="javascript:void(0);" id="_face32">
                        <img class="media-object" src="/WUI/timeline/examples/img/3d-1.jpg" alt="..." >
                    </a>
                </div>
            </li><li class="media">
                <div class="media-left">
                    <a href="javascript:void(0);" id="_face42">
                        <img class="media-object" src="/WUI/timeline/examples/img/3d-4.jpg" alt="..." >
                    </a>
                </div>
            </li>
            </ul>
            </div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                <@bsul lis=listmyul1 />
            </div>
        </div>
        </div>
        <div class="col-xs-2 col-sm-3 col-md-3 col-lg-3">
            <div class="jumbotron" style="text-align:center;">
                <h1>QBlog</h1>

                <p style="margin:0;">
                    <a href="http://uikoo9.com/jfinalQ" target="_blank">jfinalQ</a> and <a
                        href="http://uikoo9.com/bootstrapQ" target="_blank">bootstrapQ</a> demo blog
                </p>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $("#myNav").affix({
            offset: {
                top: 125
            }
        });

    });

    function changewidth(v){
        if(v){
            $("#left").removeClass().addClass(  "col-md-10 col-sm-10");
            $("#right").css("display","none");
        }else{
            $("#left").removeClass().addClass(  "col-md-4 col-sm-5");
            $("#right").css("display","inline");
        }
    }

    var tabsFn = (function () {

        function init() {
            setHeight();
        }

        function setHeight() {
            var $tabPane = $('.tab-pane'),
            tabsHeight = $('.nav-tabs').height();

            $tabPane.css({
                height: tabsHeight
            });
        }

        $(init);
    })();


</script>
<@backtotop/>
</@html>
